<script setup>
import Layout_top from '@/components/Layout_top.vue'
import Layout_foot from '@/components/Layout_foot.vue'
import { ref } from 'vue'
import { ShoppingCart, Search, CaretTop } from '@element-plus/icons-vue'
import { ElTabs, ElTabPane } from 'element-plus'
import { goodsListService, goodsSearchService } from "@/api/goods.js"
// 保持原有导入和响应式数据
import { useRouter } from 'vue-router' // 新增路由导入
const router = useRouter() // 新增路由
// 定义轮播图图片数组
const carouselImages = ref([
    '/img/slide.jpg',
    '/img/slide02.jpg',
    '/img/slide03.jpg',
    '/img/slide04.jpg'
])
// 新增搜索关键词响应式变量
const searchKeyword = ref('')

// 新增商品列表数据
const goodsList = ref([])
// 新增搜索处理方法
const handleSearch = async () => {
    if (searchKeyword.value.trim()) {
        let result = await goodsSearchService(searchKeyword.value)
        // 处理搜索结果
        if (result.code === 200) {
            goodsList.value = result.data

        }
    }
}



const getGoodsList = async () => {
    let result = await goodsListService();
    goodsList.value = result.data;
}
getGoodsList();

import { addCartService } from '@/api/cart.js'// 加入购物车功能
import { ElMessage, ElMessageBox } from 'element-plus'
const addToCart = async (goods) => {
    let res = await addCartService(goods.gid, 1);
    console.log(res);
    if (res.code === 200) {
        ElMessage.success('加入购物车成功')
    } else {
        ElMessageBox.alert('加入购物车失败')
    }
}

// 新增跳转方法
const goToDetail = (id) => {
    router.push(`/detail/${id}`) // 假设你的详情页路由是/detail/:id
}

import { computed } from 'vue' // 新增计算属性导入

// 新增分类计算属性
const categorizedGoods = computed(() => {
    return goodsList.value.reduce((acc, goods) => {
        const categoryMap = {
            0: '新鲜水果',
            1: '冰爽饮料',
            2: '海鲜水产',
            3: '新鲜蔬菜'
        }
        const category = categoryMap[goods.types] || '其他分类'
        if (!acc[category]) acc[category] = []
        acc[category].push(goods)
        return acc
    }, {})
})

// 新增分类选项卡响应式数据
const activeTab = ref('')
const categoryTabs = computed(() => Object.keys(categorizedGoods.value))
const handleTabChange = (name) => {
    const target = document.getElementById(name)
    if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' })
}

//点击Logo刷新首页
const reloadPage = () => {
    window.location.reload()
}
</script>
<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <Layout_top></Layout_top>
            </el-header>
            <el-main>
                <!-- 商城头部 -->
                <div class="mall-header">
                    <img src="@/assets/logo2.png" height="50px" alt="美多商城" class="mall-logo" @click="reloadPage">
                    <div class="search-container">
                        <el-input placeholder="搜索商品名称" v-model="searchKeyword" @keyup.enter="handleSearch"
                            class="search-input">
                            <template #prefix>
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </template>
                        </el-input>
                        <el-button type="primary" @click="handleSearch" class="search-btn">搜索</el-button>
                    </div>
                </div>

                <!-- 分类选项卡和轮播图容器 -->
                <div class="banner-container">
                    <el-tabs v-model="activeTab" tab-position="left" class="category-tabs"
                        @tab-click="({ paneName }) => handleTabChange(paneName)">
                        <el-tab-pane v-for="name in categoryTabs" :key="name" :label="name" :name="name"></el-tab-pane>
                    </el-tabs>
                    <!-- 轮播图 -->
                    <el-carousel indicator-position="outside" height="270px" class="custom-carousel">
                        <el-carousel-item v-for="(image, index) in carouselImages" :key="index">
                            <img :src="image" alt="轮播图" class="carousel-image">
                        </el-carousel-item>
                    </el-carousel>
                    <!-- 广告图容器 -->
                    <div class="ad-container">
                        <img src="@/assets/adv01.jpg" class="ad-image" alt="促销广告1">
                        <img src="@/assets/adv02.jpg" class="ad-image" alt="促销广告2">
                    </div>
                </div>

                <!-- 商品分类及列表 -->
                <div v-for="(category, name) in categorizedGoods" :key="name" :id="name">
                    <el-divider content-position="center">
                        <span class="category-title">{{ name }}</span>
                    </el-divider>
                    <div class="goods-list">
                        <div v-for="goods in category" :key="goods.gid" class="goods-item"
                            @click="goToDetail(goods.gid)">
                            <el-image :src="goods.gpic" fit="cover" class="goods-image"></el-image>
                            <div class="goods-info">
                                <div class="goods-name">{{ goods.gname }}</div>
                                <div class="price-container">
                                    <div class="goods-price">¥{{ goods.gprice }}</div>
                                    <el-button type="primary" class="add-cart-btn" @click.stop="addToCart(goods)">
                                        <el-icon>
                                            <ShoppingCart />
                                        </el-icon> 加入购物车
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-main>
            <el-footer>
                <Layout_foot></Layout_foot>
            </el-footer>
        </el-container>
        <!-- 回到顶部按钮 -->
        <el-backtop target=".common-layout" :right="40" :bottom="100" :visibility-height="300" class="sidebar-backtop">
            <div class="backtop-content">
                <el-icon :size="24" color="#fff">
                    <CaretTop />
                </el-icon>
                <span class="text">回到顶部</span>
            </div>
        </el-backtop>
    </div>
</template>


<style lang="scss" scoped>
.mall-header {
    display: flex;
    align-items: center;
    justify-content: center; // 新增居中属性
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;

    .search-container {
        display: flex;
        flex: 0 0 800px; // 修改为固定宽度
        max-width: 800px; // 缩短搜索容器宽度

        .search-input {
            flex: 1; // 输入框占据剩余空间
            margin-right: 10px;
            margin-left: 30px;

            :deep(.el-input__inner) {
                border-radius: 20px;
                padding-left: 40px;
            }
        }

        .search-btn {
            border-radius: 20px;
            padding: 12px 30px;
            flex-shrink: 0; // 防止按钮被压缩
        }
    }
}

.el-carousel__item h3 {
    display: flex;
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.custom-carousel {
    width: 760px;
    /* 调整宽度为80% */
    margin: 0 auto;
    /* 居中显示 */
}

.goods-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; // 缩小间距
    padding: 30px 0 15px;
    max-width: 1400px; // 增加容器宽度
    margin: 0 auto;

    .goods-item {
        width: calc(25% - 11.25px); // 改为25%（4个/行）并调整间距计算
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        overflow: hidden;


        .goods-image {
            width: 100%;
            height: 350px; // 固定图片高度
            object-fit: cover; // 保持图片比例
            object-position: center; // 居中显示
            background: #f8f9fa; // 添加背景色填充空白区域
            // padding: 10px; // 添加内边距
        }

        .goods-info {
            padding: 12px;
            position: relative;
            // min-height: 120px;


            // 新增价格容器样式
            .price-container {
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;
                margin-top: auto; // 自动顶到下方
                padding-top: 10px;
            }

            .goods-price {
                color: #e4393c;
                font-size: 18px;
                font-weight: bold;

            }

            .add-cart-btn {
                padding: 8px 15px !important;
                border-radius: 15px !important;
            }
        }
    }
}



// 修改分类标题样式
:deep(.el-divider) {
    &.el-divider--horizontal {
        margin: 30px 0;

        &::before,
        &::after {
            border-color: #3765e4;
            border-width: 2px;
        }

        // 新增居中样式
        .el-divider__text {
            left: 50%;
            transform: translateX(-50%);
        }
    }
}

.category-title {
    position: relative;
    padding: 0 20px;
    font-size: 22px;
    font-weight: 600;
    color: #333;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    display: inline-block;
    text-align: center;

    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 60px; // 延长线条长度
        height: 2px;
        background: linear-gradient(90deg, transparent, #3975e4);
    }

    &::before {
        left: -70px; // 调整左侧线条位置
        transform: translateY(-50%);
    }

    &::after {
        right: -70px; // 调整右侧线条位置
        background: linear-gradient(90deg, #3975e4, transparent);
    }
}

// 优化悬浮按钮样式
// 修改滚动容器样式
.common-layout {
    height: 100vh; // 新增高度设置
    overflow-y: auto; // 启用垂直滚动
}

.sidebar-backtop {
    .backtop-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 12px 16px; // 增加水平内边距
        background: #409eff; // 添加蓝色背景
        border-radius: 24px; // 增加圆角
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); // 添加阴影

        .text {
            font-size: 12px;
            margin-top: 4px;
            line-height: 1.2;
            white-space: nowrap;
            color: #fff; // 文字改为白色
            padding: 0 4px; // 增加文字内边距
        }
    }

    // 新增图标颜色设置
    .el-icon {
        color: #fff !important;
    }
}

// 新增分类选项卡样式
.banner-container {
    display: flex;
    max-width: 1200px;
    margin: 20px auto;
    gap: 0px; // 容器间隙归零
}

.category-tabs {
    width: 180px;
    height: 270px; // 与轮播图高度一致
    // background: #f8f9fc;
    border-radius: 8px;
    padding: 10px 0;
    // box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;

    // 为每个标签项添加不同背景色
    :deep(.el-tabs__item) {
        font-size: 17px; // 从16px调大
        font-weight: 500; // 新增中等字重
        height: 44px !important; // 调整个别项高度
        line-height: 44px !important;
        padding: 0 12px !important;
        margin: 4px 0; // 添加上下间距

        &:nth-child(1) {
            background-color: rgba(107, 141, 214, 0.03);
        }

        // 浅蓝
        &:nth-child(2) {
            background-color: rgba(76, 175, 80, 0.03);
        }

        // 浅绿
        &:nth-child(3) {
            background-color: rgba(233, 105, 103, 0.03);
        }

        // 浅红
        &:nth-child(4) {
            background-color: rgba(255, 193, 7, 0.03);
        }

        // 浅黄
        &:nth-child(5) {
            background-color: rgba(126, 87, 194, 0.03);
        }

        // 浅紫

        // 统一激活状态样式
        &.is-active {
            background: rgba(255, 255, 255, 0.9) !important;
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
        }

        // 调整悬停效果
        &:hover {
            background: rgba(255, 255, 255, 0.85) !important;
        }
    }

    :deep(.el-tabs__active-bar) {
        background-color: #6B8DD6;
        width: 3px !important;
    }

    :deep(.el-tabs__nav-wrap) {
        height: 100%; // 确保导航区域占满容器
        padding: 8px 0; // 调整内边距
    }

    :deep(.el-tabs__nav) {
        height: 100% !important; // 强制导航区域高度
        justify-content: space-between; // 均匀分布
    }
}

// 调整轮播图宽度
.custom-carousel {
    width: 760px; // 轮播图增加宽度
    margin-left: -10px; // 向左偏移10px
    flex: none;
}

.mall-logo {
    cursor: pointer;
    transition: transform 0.3s ease;
    &:hover {
        transform: scale(1.05);
    }
}
</style>
